<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/10/15
  Time: 20:40
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="../css/order.css">
    <link href="../layui/css/layui.css" rel="stylesheet">
    <script src="../layui/layui.js"></script>
    <script src="../js/jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="g-page">
    <div class="order-head">
        <ul>
            <li>
                <div class="order-head-1"></div>
                <div class="order-head-2">1</div>
                <span>提交订单</span>
            </li>

            <li>
                <div class="order-head-1"></div>
                <div class="order-head-3">2</div>
                <span>支付定金</span>
            </li>

            <li>
                <div class="order-head-1"></div>
                <div class="order-head-4">3</div>
                <span>等待确认</span>
            </li>

            <li>
                <div class="order-head-1"></div>
                <div class="order-head-5">4</div>
                <span>预订成功</span>
            </li>
        </ul>
    </div>
    <div class="order-body">
        <div class="order-right">
            <div class="image1">
                <div class="image11">
                    <img src="../images/shanghai2.png">
                </div>
                <span>大唐不夜城/钟鼓楼回民街/小寨/省体育场地铁口/超清投影/秋千海洋球/白色吊椅大床房</span>
                <h6>整套出租</h6><br>
                <span class="bottom1">1室0厅|1床|最多住2人</span>
            </div>
            <div class="order-detail">
                <div class="detail-head">
                    <span class="title-left">线上支付</span>
                    <span class="title-right">370</span>
                    <span class="title-right1">￥</span>
                </div>
                <div class="detail">
                    <span class="detail-left">全部房费</span>
                    <span class="detail-right"></span>
                    <span class="detail-right1">￥</span>
                </div>
                <div class="detail">
                    <span class="detail-left">清洁费</span>
                    <span class="detail-right">20.00</span>
                    <span class="detail-right1">￥</span>
                </div>
                <div class="detail">
                    <span class="detail-left">押金（离店后退还）</span>
                    <span class="detail-right">200.00</span>
                    <span class="detail-right1">￥</span>
                </div>
                <div class="detail">
                    <span class="detail-left">新房特惠</span>
                    <span class="detail-right">- 38.00</span>
                    <span class="detail-right1">￥</span>
                </div>
                <div class="detail">
                    <span class="detail-left">押金</span>
                    <span class="detail-right">200.00</span>
                    <span class="detail-right1">￥</span>
                </div>
            </div>
        </div>
        <form class="usereinfo-form-one">
            <div class="order-left">
                <div class="order-inf">
                    <div class="left-head">
                        <h2>预定信息</h2>
                        <span>下单后由商家确定接单</span>
                    </div>
                    <div class="left-head-content">
                        <ul>
                            <li>
                                入住时间：
                                <div class="layui-inline">
                                    <label class="layui-form-label"></label>
                                    <div class="layui-input-inline">
                                        <input type="text" class="layui-input" value="2020-9-28 至 2020-9-29" id="test6" placeholder="请输入你的入店时间"/>
                                    </div>
                                    <script>
                                        layui.use('laydate', function() {
                                            var laydate = layui.laydate;
                                            laydate.render({
                                                elem: '#test6'
                                                , range: true
                                            });
                                        })
                                    </script>
                                </div>
                                <span>共</span>
                                <span>1</span>
                                <span>晚</span>
                                <span class="head-inf">入住日14:00后入住，离店日12:00前离开。</span>
                            </li><br>
                            <li>入住人数：<select>
                                <option>1人</option>
                                <option>2人</option>
                                <option>3人</option>
                            </select></li>
                        </ul>
                    </div>
                </div>
                <div class="order-person">
                    <div class="left-head">
                        <h2>入住人信息</h2>
                    </div>
                    <div class="left-head1">
                        <h3>入住人信息:</h3>
                        <span>暂时不接待港澳人员</span>
                    </div>
                    <span class="pesons">选择入住人</span>
                    <div class="addPer">
                        <a href="javascript:void(0)" class="addPerson"  value="点击弹出层" onclick="ShowDiv('MyDiv','fade')">+    添加入住人</a>
                        <div id="fade" class="black_overlay">
                        </div>
                        <div id="MyDiv" class="white_content">
                            <div class="addHead">
                                <span class="addText">添加入住人</span>
                                <div style="text-align: right; cursor: default; height: 40px;" id="move">
                                    <div class="cha" onclick="CloseDiv('MyDiv','fade')">
                                        <img src="../images/cha.svg"></div>
                                </div>
                            </div>
                            <div class="addform">
                                <form>
                                    <div class="inf1">
                                        证件类型:<select class="addselect">
                                        <option>身份证</option>
                                        <option>军官证</option>
                                    </select>
                                        <input type="text" class="addtext1"><br>
                                    </div>
                                    <div class="inf1">手机号码:<select class="addselect">
                                        <option>+86</option>
                                        <option>+852</option>
                                        <option>+81</option>
                                        <option>+886</option>
                                        <option>+866</option>
                                    </select>
                                        <input type="text" class="addtext1"><br></div>

                                    <input type="button" value="提交" class="submit1">
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="lianxi">
                        <input type="checkbox" value="啊青"> 阿青
                    </div>
                    <div class="perTel">
                        <span >阿青</span>
                        <span >身份证号：<input type="text" value="${sessionScope.Orders.other1}" placeholder="请输入你的身份证号"></span>
                        <span >电话：<input type="tel" placeholder="输入你的电话号码"></span>
                    </div>
                    <div class="lianxiT">
                        联系电话：<SELECT>
                        <option>+86</option>
                        <option>+852</option>
                        <option>+82</option>
                        <option>+65</option>
                    </SELECT>
                        <input TYPE="tel" name="telp">
                    </div>
                </div>
                <div class="insure">
                    <div class="left-head">
                        <h2>发票</h2>
                    </div>
                    <div class="left-head2">
                        <h5>房费发票请联系房东（有疑问请咨询客服）</h5>
                    </div>
                </div>
                <div class="insure">
                    <div class="left-head">
                        <h2>退订规则</h2>
                    </div>
                    <div class="left-head2">
                        <h5>未入住/提前离店 收取剩余房费的100%</h5><br>
                        <h5> 若未入住且订单已不可取消，可拨打400-188-1234申请退还清洁费</h5>
                    </div>
                    <div class="rule">
                        <input type="checkbox"name="rule">
                        <span> 我已阅读并同意<</span>
                        <a href="" style="color: red">相关条款</a>
                        <span>>和上述入住须知</span>
                    </div>
                    <input type="button" value="提交订单" class="btn-primary-one">
                </div>
            </div>
        </form>
    </div>
</div>

</body>
<script src="../js/order.js"></script>
<script>
    function ShowDiv(show_div,bg_div){
        document.getElementById(show_div).style.display='block';
        document.getElementById(bg_div).style.display='block' ;
        var bgdiv = document.getElementById(bg_div);
        bgdiv.style.width = document.body.scrollWidth;
// bgdiv.style.height = $(document).height();
        $("#"+bg_div).height($(document).height());
    };
    //关闭弹出层
    function CloseDiv(show_div,bg_div)
    {
        document.getElementById(show_div).style.display='none';
        document.getElementById(bg_div).style.display='none';
    };




    document.querySelector(".btn-primary-one").onclick = function() {
        var formData = $(".usereinfo-form-one").serialize();
        console.log(formData);

        var sumPrice = parseFloat(document.querySelector(".title-right").innerText)
        console.log(sumPrice)

        $.ajax({
            url:"${pageContext.request.contextPath}/orders/save?sumPrice="+sumPrice,
            type:"post",//get
            data:formData,
            dataType:"json",
            success:function(result){
                console.log(result);
                if(result.code == 200)
                    location.href ="../orders/all";
                else
                    alert(result.data);
            }
        });
    }

</script>




</html>
